import React from 'react';
import { Link } from 'react-router-dom';
import omit from 'lodash/omit';
// import List from 'antd-mobile/lib/list';
// import DatePicker from 'antd-mobile/lib/date-picker';
import Toast from 'antd-mobile/lib/toast';
import { fetchMyInfoApi,fetchEditUserCenterApi } from '../api';
import './index.less';

export default class PersonDetails extends React.PureComponent {
  state = {
    date: '',
    data: {},
    editState: { username: false, mobile: false, email: false }
  }

  fetchMyInfo = ()=>{
    fetchMyInfoApi().then(({ data }) => {
      const { birth_year, birth_month, birth_day } = data;
      const date = birth_year ? new Date(birth_year, +birth_month - 1, birth_day) : '';
      let { editState } = this.state;

      for(let key in data){
        if((key === 'username' || key === 'mobile' || key === 'email') && !data[key]){
          editState[key] = true;
        }
      }
      data && this.setState({ data, date, editState })
    })
  }

  componentDidMount() {
    this.fetchMyInfo();
  }

  // eidtHandle(val, status, type) {
  //   const { editState } = this.state;
  //   editState[type] = !status;
  //   this.setState({ editState }, ()=>{
  //     this.forceUpdate();
  //   });
  // }

  // inputChange(e, type){
  //   let { data } = this.state;
  //   data[type] = e.target.value;

  //   this.setState({ data }, () => {
  //     this.forceUpdate();
  //   })
  // }

  // radioChange = (e) => {
  //   let { data } = this.state;
  //   data.gender = e.target.value;

  //   this.setState({ data }, () => {
  //     this.forceUpdate();
  //   })
  // }

  // pickerChange(val){
  //   let { data } = this.state;
  //   data.birth_day =  val.getDate();
  //   data.birth_month =  val.getMonth() + 1;
  //   data.birth_year = val.getFullYear();

  //   const date = new Date(data.birth_year, data.birth_month, data.birth_day);

  //   this.setState({ data, date })
  // }
  submitForm = () => {
    const data = omit(this.state.data, ['avatar', 'date_added']);

    fetchEditUserCenterApi(data).then((res)=>{
      if(res.code === 1000){
        Toast.success('修改成功！');
        this.fetchMyInfo();
      }
    })
  }
  render() {
    const { data } = this.state;
    // const { username, mobile, email } = this.state.editState;
    return (
      <div className=" account-block person-details">
        <div className=" account-block__title person-details__title">
          个人信息
        </div>
        <div className=" account-block__content person-details__content">
          {/* <div className="am-list-item am-list-item-middle">
            <div className="am-list-line center-btw">
              <div className="am-list-content">
                <span>登录名<sup>*</sup>：</span>
                {
                  username ?
                    <input type="text" className="edit-input user-edit-input" onChange={(e)=>this.inputChange(e,'username')} value={data.username} /> :
                    <span>{data.username}</span>
                }
              </div>
              <div className="am-list-content-edit">
                <span onClick={()=>this.eidtHandle(data.username,username,'username')}>{!username ? '修改' : ''}</span>可用于登录，请牢记哦~
              </div>
            </div>
          </div> */}

          <div className="am-list-item am-list-item-middle">
            <div className="am-list-line center-btw">
              <div className="am-list-content">
                <span>手机号码：</span>
                <span>{data.mobile}</span>
              </div>
              <div className="am-list-content-edit">
                <span><Link to="/editPhoneForm">更改</Link></span>
              </div>
            </div>
          </div>

          <div className="am-list-item am-list-item-middle">
            <div className="am-list-line center-btw">
              <div className="am-list-content">
                <span>密码</span>
              </div>
              <div className="am-list-content-edit">
                <span><Link to="/editPassword">更改</Link></span>
              </div>
            </div>
          </div>

          {/* <div className="am-list-item am-list-item-middle">
            <div className="am-list-line">
              <div className="am-list-content">性 别：</div>
              <div className="am-list-extra sex-select">
                <div className="input-item">
                  <input type="radio" name="sex" onChange={this.radioChange} checked={data.gender == 1} value="1" />
                  <span>男</span>
                </div>
                <div className="input-item">
                  <input type="radio" name="sex" onChange={this.radioChange} checked={data.gender == 2} value="2" />
                  <span>女</span>
                </div>
                <div className="input-item">
                  <input type="radio" name="sex" onChange={this.radioChange} checked={data.gender == 3} value="3" />
                  <span>保密</span>
                </div>
              </div>
            </div>
          </div> */}


          {/* <DatePicker
            mode="date"
            title="选择生日"
            format='YYYY-MM-DD'
            minDate={new Date(1972, 1, 1, 0, 0, 0)}
            maxDate={new Date(3072, 1, 1, 0, 0, 0)}
            extra={date}
            value={this.state.date}
            onChange={date => this.setState({ date })}
          >
            <List.Item arrow="horizontal">生 日：</List.Item>
          </DatePicker>

          <div className="am-list-item am-list-item-middle">
            <div className="am-list-line center-btw">
              <div className="am-list-content">
                <span>邮 箱：</span>
                {
                  email ?
                    <input type="text" onChange={(e)=>this.inputChange(e,'email')} className="edit-input" value={data.email} /> :
                    <span>{data.email}</span>
                }
              </div>
              <div className="am-list-content-edit">
                <span onClick={()=>this.eidtHandle(data.email, email, 'email')}>{!email ? '更改' : ''}</span><span className="email-confilm">立即验证</span>
              </div>
            </div>
          </div> */}

          <div className="button-container">
            <span className="button" onClick={this.submitForm}>提交</span>
          </div>
        </div>
      </div>
    )
  }
}